<template>
  <div class="page-card">
    <plate-card :icon="TitleIcon" title="监控信息">
      <!--      <template #header-action>-->
      <!--        <el-select v-model="currentMonitor" class="monitor-selector w-[120px]" placeholder="请选择摄像头" size="small">-->
      <!--          <el-option v-for="item in monitorList" :key="item.value" :label="item.label" :value="item.value" />-->
      <!--        </el-select>-->
      <!--      </template>-->
      <div class="flex items-center justify-between my-[2px] h-[110px]">
        <div v-for="(item, index) in monitorList" :key="index" class="w-[49%] h-full rounded-[4px] overflow-hidden relative monitor-item">
          <el-image :src="item.image" class="w-full h-full select-none" fit="cover" />
          <div class="mask top pt-1 pr-[20px]">
            <span class="scale-[0.9] block"
              >{{ currentTime.format('YYYY-MM-DD') }} {{ weekDays[Number(currentTime.format('d'))] }}
              {{ currentTime.format('HH:mm:ss') }}
            </span>
          </div>
          <div class="mask bottom pt-4 pl-[120px]">
            <span class="scale-[0.6] block text-right pl-22">{{ item.title }}</span>
          </div>
        </div>
        <!--        <div-->
        <!--          v-for="(item, index) in monitorList"-->
        <!--          :key="index"-->
        <!--          class="w-[49%] h-[100px] bg-[#00598C] text-[#397EA5] flex items-center justify-center rounded-[4px] text-[14px]"-->
        <!--        >-->
        <!--          {{ item.title }}-->
        <!--        </div>-->
        <!--        <video autoplay class="video" controls src="https://oss.galaxy-x.cn/images/2024/1/8/test.mp4"></video>-->
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import TitleIcon from '@/assets/images/card-title/monitor.png'
  import { reactive, ref } from 'vue'
  import { getAssetsFile } from '@/utils'
  import dayjs from 'dayjs'

  const monitorList = ref([
    { title: '摄像机01', id: 1, image: getAssetsFile('monitor/camera-01.jpg') },
    { title: '摄像机02', id: 2, image: getAssetsFile('monitor/camera-02.jpg') }
  ])

  // 日期相关
  const currentTime = ref(dayjs())
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const updateTime = () => {
    // 一秒钟更新一次
    setInterval(() => {
      currentTime.value = dayjs()
    }, 1000)
  }
  updateTime()
</script>

<style lang="scss" scoped>
  .monitor-selector {
    :deep(.el-input__wrapper) {
      background: #006f6e;
      color: #fff;
      border: none;
      box-shadow: none;
      input {
        color: white;
      }
    }
  }

  .monitor-item {
    .mask {
      position: absolute;
      left: 0;
      height: 30%;
      width: 100%;
      color: rgba(255, 255, 255, 0.8);
      &.top {
        top: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
      }
      &.bottom {
        bottom: 0;
        //background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
      }
    }
  }
</style>
